import React from 'react';
import { connect } from 'react-redux';
import SubHeaderComponent from '../../../components/subHeader';
import { authLogin } from '../../../assets/js/utils';
import config from '../../../assets/js/conf/config';
import * as Request from '../../../services/home/address';
import * as gRequest from '../../../services/home/goods';
import Css from '../../../assets/css/home/balance/index.css';
import { Toast } from 'antd-mobile';

class BalanceIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name: '',
            cellphone: '',
            sAddress: ''
        }
        this.isSubmit = true;
        authLogin(props); //会员登录认证
    }

    componentDidMount(){
        if(sessionStorage['aid']){
            this.getAddressInfo();
        }else{
            this.getDefaultAddress();
        }
    }

    //获取收货地址信息
    getAddressInfo(){
        const { uid } = this.props.user;
        Request.getAddressInfo({ uid, aid:sessionStorage['aid'] }).then(res => {
            if(res.code === 200){
                const { name, cellphone, province, city, area, address } = res.data;
                this.setState({ name, cellphone, sAddress: `${province}${city}${area}${address}` });
            }
        });
    }

    //获取默认收货地址
    getDefaultAddress(){
        const { uid } = this.props.user;
        Request.getDefaultAddress({ uid }).then(res => {
            if(res.code === 200){
                const { name, cellphone, province, city, area, address, aid } = res.data;
                localStorage['aid'] = aid;
                this.setState({ name, cellphone, sAddress: `${province}${city}${area}${address}` });
            }
        });
    }

    //提交订单
    submitOrder(){
        const aAddressId = localStorage['aid'] || sessionStorage['aid'];
        if(aAddressId){
            if(this.props.cart.total > 0){
                if(this.isSubmit){
                    this.isSubmit = false;
                    const params = {
                        uid: this.props.user.uid,
                        freight: this.props.cart.freight,
                        addsid: aAddressId,
                        goodsData: JSON.stringify(this.props.cart.aCartData)
                    };
                    gRequest.submitOrder(params).then(res => {
                        if(res.code === 200){
                            this.goPage('balance/end');
                        }
                    });
                }
            }else{
                Toast.info('请选择你需要购买的商品！', 2);
            }
        }else{
            Toast.info('请选择收货地址', 2);
        }
    }
    
    //页面跳转
    goPage(url){
        this.props.history.replace(config.path+url);
    }

    componentWillUnmount(){
        this.setState = (state, callback) => {
            return ;
        }
    }

    render(){
        const { aCartData, total, freight } = this.props.cart;
        const { name, cellphone, sAddress } = this.state;
        return (
            <div className={Css['page']}>
                {/* 头部 */}
                <SubHeaderComponent title="确认订单" />
                {/* 内容主体 */}
                <div className={Css['main']}>
                    <div className={Css['address-wrap']} onClick={() => this.goPage('address/index')}>
                        {
                            sessionStorage['aid'] || localStorage['aid'] ? <React.Fragment>
                                <div className={Css['person-info']}>
                                    <span>收货人：{name}</span><span>{cellphone}</span>
                                </div>
                                <div className={Css['address']}>
                                    <img src={require('../../../assets/images/home/cart/map.png')} alt="loading" />
                                    <span>{sAddress}</span>
                                </div>
                            </React.Fragment> : <div className={Css['address-null']}>您的收货地址为空，点击添加收货地址</div>
                        }
                        <div className={Css['arrow']}></div>
                        <div className={Css['address-border-wrap']}>
                            <div className={Css['trapezoid']+' '+Css['style1']}></div>
                            <div className={Css['trapezoid']+' '+Css['style2']}></div>
                            <div className={Css['trapezoid']+' '+Css['style1']}></div>
                            <div className={Css['trapezoid']+' '+Css['style2']}></div>
                            <div className={Css['trapezoid']+' '+Css['style1']}></div>
                            <div className={Css['trapezoid']+' '+Css['style2']}></div>
                            <div className={Css['trapezoid']+' '+Css['style1']}></div>
                            <div className={Css['trapezoid']+' '+Css['style2']}></div>
                            <div className={Css['trapezoid']+' '+Css['style1']}></div>
                            <div className={Css['trapezoid']+' '+Css['style2']}></div>
                        </div>
                    </div>
                    <div className={Css['goods-wrap']}>
                        {
                            aCartData.length > 0 ? aCartData.map((item, index) => {
                                return (
                                    item.checked ? 
                                        <div key={index} className={Css['goods-list']}>
                                            <div className={Css['image']}>
                                                <img src={item.img} alt={item.title} />
                                            </div>
                                            <div className={Css['goods-param']}>
                                                <div className={Css['title']}>{item.title}</div>
                                                <div className={Css['attr']}>
                                                    {
                                                        item.attrs.length > 0 ? item.attrs.map((ktem, kndex) => {
                                                            return (
                                                                <span key={kndex}>{ktem.title}:{ktem.param[0].title}</span> 
                                                            )
                                                        }) : ''
                                                    }
                                                </div>
                                                <div className={Css['amount']}>x {item.amount}</div>
                                                <div className={Css['price']}>￥{item.price}</div>
                                            </div>
                                        </div>
                                    : ''
                                )
                            }) : ''
                        }
                    </div>
                    <ul className={Css['total-wrap']}>
                        <li>商品总额</li>
                        <li>￥{total}</li>
                    </ul>
                    <ul className={Css['total-wrap']}>
                        <li>运费</li>
                        <li>￥{freight}</li>
                    </ul>
                </div>
                {/* 底部footer */}
                <div className={Css['balance-wrap']}>
                    <div className={Css['price-wrap']}>
                        <span>实际金额：</span><span>￥{Math.round(Number(total)+Number(freight)).toFixed(2)}</span>
                    </div>
                    <div className={Css['balance-btn']} onClick={() => this.submitOrder()}>提交订单</div>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(BalanceIndex);